<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .contair{
            width: 800px;
            height: 500px;
            margin: 50px auto;
            position: relative;
        }
        .contair{
            border-top: 1px solid #eeeeee;
        }
        .contair h1{
            width: 800px;
            height: 50px;
            line-height: 50px;
            font-weight: 500;
            font-size: 30px;


        }
        .contair h1 span{
            margin-left: 10px;
            font-size: 16px;
            font-weight: 300;
            color: #b0b0b0;
        }
        form>div{
            width: 800px;
            height: 50px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #e6e6e6;
            margin: 5px 0px;
        }
        .br_red{
            border: 1px solid black;
        }
        .br_gre{
            border: 1px solid orange;
        }
        form>div>span{
            width: 100px;
            display: flex;
            justify-content: space-around;
            /* background-color: green; */
        }
        form>div .tel{
            display: block;
            background: red;
        }
        form>div .edu{
            display: block;
            background: green;
        }
        form>div>input{
            width: 700px;
            background-color: #e6e6e6;
            border: none;
            outline: none;
            height: 50px;
            line-height: 50px;
        }
        form .div2{
            border: 2px solid red;
        }
        form .div3{
            border: 2px solid green;
        }
        form button{
            width: 100px;
            height: 40px;
            text-align: center;
            background: blue;
            border-radius: 10px;
            margin-right: 20px;
        }
        form .r1{
            width: 100px;
            height: 40px;
            text-align: center;
            border-radius: 10px;
        }
        table{
            margin: 20px auto;
            width: 800px;
border-collapse: collapse;
            border-top: 2px solid #e6e6e6;
        }
        table td{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid gray;
        }
        table .m{
            margin-left: 10px;
            background: green;
        }
        table .d{
            margin-left: 90px;
            
            background: red;
        }
        table td:last-child{
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: justify;
          
        }
        .mask{
            width: 900px;
            height: 700px;
            margin: 0 auto;
            position: absolute;
            top: 0px;
            left: 0px;
            background: blue;
            /* opacity: 0.1; */
            display: none;
        }
        .mask>form{
            margin-top: 300px;
        }
        .disbl{
            display: block;
        }
    </style>
   
</head>
<body>
    <div class="contair">
        <h1>表单 <span>Subtext for header</span></h1>
        <form action="" class="form">
          
            <div class="div1"><span>姓名:</span><input type="text" name="Name" placeholder="不能以数字开头,长度在8~16之间"></div>
            <div class="div2"><span class="tel">联系电话:</span><input type="text" name="phone" maxlength="11" placeholder="请输入正确11位号码"></div>
            <div class="div3"><span class="edu">学历:</span><input type="text" name="sch"  placeholder="校验通过"></div>
            <div class="div4"><span>年龄:</span><input type="text" name="age" placeholder="Amount"></div>
            <div class="div5"><span>期望薪资:</span><input type="text" name="soldry" placeholder="Amount"></div>
            <button name="baocun">保存</button>
            <input type="reset" name="reset" class="r1">
           
        </form>

        <table>
            <tbody name="tbody">
                <thead>
                    <td>姓名</td>
                    <td>联系电话</td>
                    <td>学历</td>
                    <td>年龄</td>
                    <td>期望薪资</td>
                    <td>操作</td>
                </thead>
                <div class="noinfo"></div>
            </tbody>
        </table>
        <div class="mask">
            <form action="" name="Nform">
              
            <div><span>姓名:</span><input type="text" name="Name"></div>
            <div><span>联系电话:</span><input type="text" name="phone"></div>
            <div><span>学历:</span><input type="text" name="sch"></div>
            <div><span>年龄:</span><input type="text" name="age"></div>
            <div><span>期望薪资:</span><input type="text" name="soldry"></div>
            <button name="fixed">修改</button>
            <button name="close">关闭</button>
            </form>
        </div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./test.js">
       
    </script>
</body>
</html>